<template>
  <div class="my-list">
      <div class="mark"  @click="$emit('closePlay')"></div>
      <ul >
           <NewSongs v-for="item in list" :key="item.id" :item="item"
            @click.native="$emit('songId', item)" :playsong="playsong"/>
      </ul>
     
      <div class="close" @click="$emit('closePlay')">关闭</div>
  </div>
</template>

<script>
import NewSongs  from "@/components/NewSongs.vue"
export default {
    props:["playsong","NewSongList","cardSongList"],
    components:{
        NewSongs
    },
    computed:{
        list:function(){
            return this.cardSongList? this.cardSongList:this.NewSongList
        }
    }
}
</script>

<style lang="less" scoped>
    .my-list{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 60%;
        background: whitesmoke;
        overflow-y: auto;
        z-index: 100;
     
        border-radius: 20px 20px 0 0;
        .mark{
            position: fixed;
            height: 100vh;
            width: 100vw;
            top: 0;
            left: 0;
            background: rgba(238, 232, 232, 0.2);
            z-index: -1;
            
        }
        ul{
            margin: 0;
            padding: 0;
        }
        .close{
            position:fixed;
            bottom: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background:#999;
            color: white;
            }
    }
</style>